Angular-এ ফর্ম তৈরি করার দুটি প্রধান পদ্ধতি রয়েছে: টেম্পলেট-ড্রিভেন ফর্মস এবং রিঅ্যাকটিভ ফর্মস। এই টিউটোরিয়ালে আমরা টেম্পলেট-ড্রিভেন ফর্মস সম্পর্কে আলোচনা করব, যা Angular-এ ফর্ম তৈরি এবং পরিচালনার সবচেয়ে সহজ এবং প্রচলিত পদ্ধতি।

টেম্পলেট-ড্রিভেন ফর্মগুলো কম্পোনেন্টের টেমপ্লেটের মধ্যে তৈরি করা হয় এবং খুব কম কোডের মাধ্যমে ফর্মের মান ও তার ভ্যালিডেশন পরিচালনা করা যায়। এটি সাধারণত সহজ ফর্মের জন্য ব্যবহৃত হয় যেখানে কমপ্লেক্স লজিকের প্রয়োজন হয় না।

টেম্পলেট-ড্রিভেন ফর্মস কী?

টেম্পলেট-ড্রিভেন ফর্মস হলো এমন ফর্ম যেখানে ফর্মের উপাদানগুলো মূলত HTML টেমপ্লেটে ডিফাইন করা হয়, এবং Angular ফর্মের মান এবং তার ভ্যালিডেশন পরিচালনা করে টেমপ্লেটের মাধ্যমে। এতে আপনি HTML ট্যাগের মধ্যে ফর্ম কন্ট্রোল এবং ভ্যালিডেশন নির্দিষ্ট করেন, এবং Angular ফর্মের স্টেট ও কার্যকারিতা পরিচালনা করে।

টেম্পলেট-ড্রিভেন ফর্ম তৈরি করা

টেম্পলেট-ড্রিভেন ফর্ম তৈরি করতে প্রথমে FormsModule ইম্পোর্ট করতে হবে। এটি Angular অ্যাপ্লিকেশনের মূল মডিউলে (অথবা যেখানে ফর্ম ব্যবহার করতে চান সেখানে) যুক্ত করা হয়।

১. FormsModule ইম্পোর্ট করা

প্রথমে FormsModule কে আপনার অ্যাপ্লিকেশনের মডিউলে ইম্পোর্ট করতে হবে:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';  // FormsModule ইম্পোর্ট করা

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule  // FormsModule ইম্পোর্ট করা
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এখানে, FormsModule অ্যাপ্লিকেশনে ফর্ম ব্যবহারের জন্য প্রয়োজনীয় ডিরেক্টিভস এবং সার্ভিস সরবরাহ করে।

২. টেম্পলেট-ড্রিভেন ফর্ম তৈরি করা

এবার, HTML টেমপ্লেট-এ ফর্ম কন্ট্রোল তৈরি করা হবে। আপনি ngModel ডিরেক্টিভটি ব্যবহার করে ইনপুট ফিল্ডের মান ও স্টেট নিয়ন্ত্রণ করবেন।

<!-- app.component.html -->
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" [(ngModel)]="model.name" required>
  </div>

  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" [(ngModel)]="model.email" required>
  </div>

  <button type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

এখানে:

• [(ngModel)]="model.name" এবং [(ngModel)]="model.email" ডেটা বাইন্ডিং এর মাধ্যমে ইনপুট ফিল্ডের মান কম্পোনেন্টের model অবজেক্টে ব্যাকআপ করছে।
• #myForm="ngForm" ফর্মের একটি রেফারেন্স তৈরি করছে, যার মাধ্যমে আপনি ফর্মের ভ্যালিডেশন এবং এর স্টেট অ্যাক্সেস করতে পারবেন।

৩. কম্পোনেন্টে ডেটা হ্যান্ডলিং

এখন, কম্পোনেন্টে ফর্মের জন্য ডেটা মডেল এবং সাবমিট ফাংশন তৈরি করতে হবে:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  model = { name: '', email: '' };  // ডেটা মডেল

  onSubmit(form: any): void {
    console.log('Form Submitted:', form);
    console.log('Model Data:', this.model);
  }
}

এখানে, model অবজেক্টের মান ইনপুট ফিল্ডের মাধ্যমে পরিবর্তিত হচ্ছে এবং onSubmit() ফাংশনে ফর্মের ডেটা পাঠানো হচ্ছে।

টেম্পলেট-ড্রিভেন ফর্মস এর ভ্যালিডেশন

টেম্পলেট-ড্রিভেন ফর্মগুলোতে ভ্যালিডেশন সাধারণত HTML ফর্ম কন্ট্রোলের মাধ্যমে করা হয়। আপনি required, minlength, maxlength, pattern ইত্যাদি অ্যাট্রিবিউট ব্যবহার করে ফর্ম ফিল্ডে ভ্যালিডেশন যুক্ত করতে পারেন।

উদাহরণ: ফর্ম ভ্যালিডেশন

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" [(ngModel)]="model.name" required #name="ngModel">
    <div *ngIf="name.invalid && name.touched" class="error">
      Name is required.
    </div>
  </div>

  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" [(ngModel)]="model.email" required email #email="ngModel">
    <div *ngIf="email.invalid && email.touched" class="error">
      A valid email is required.
    </div>
  </div>

  <button type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

এখানে:

• required অ্যাট্রিবিউট ইনপুট ফিল্ডের জন্য ভ্যালিডেশন নির্ধারণ করছে।
• #name="ngModel" এবং #email="ngModel" এই রেফারেন্সগুলো ব্যবহার করে আমরা ফর্ম কন্ট্রোলের ভ্যালিডেশন স্টেট (যেমন invalid এবং touched) চেক করছি এবং ব্যবহারকারীকে ভুল ইনপুট দেওয়ার জন্য একটি এরর মেসেজ দেখাচ্ছি।

সারাংশ

টেম্পলেট-ড্রিভেন ফর্মস হল Angular-এ একটি সহজ এবং প্রাথমিক পদ্ধতি, যার মাধ্যমে আপনি কম্পোনেন্টের টেমপ্লেটের মাধ্যমে ফর্ম তৈরি এবং পরিচালনা করতে পারেন। Angular ফর্মের মান এবং ভ্যালিডেশন খুব সহজভাবে ngModel ডিরেক্টিভ ব্যবহার করে পরিচালিত হয়। এটি ছোট ও সহজ ফর্মগুলির জন্য উপযুক্ত, যেখানে লজিক কম এবং অল্প কোডে ফর্ম তৈরি করা সম্ভব।